<header id="topbar">
    <div class="topbar-left">
        <ol class="breadcrumb">
            <li class="crumb-active">
                <a href="<%= window.location.href %>">每日资源分析</a>
            </li>
        </ol>
    </div>
</header>
<section id="content">
<div class="panel">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-md-10">
                <input type="text" id="dateFilter" name="dateFilter" class="form-control text-center" value="<%= options.dateRange[0] %> ~ <%= options.dateRange[1] %>">
            </div>
            <div class="col-md-1">
                <select id="resourceType" class="form-control">
                    <option value="coin">夺宝币</option>
                    <option value="coupon" <%= options.resourceType == "coupon" ? "selected" : "" %>>红包</option>
                    <option value="credit" <%= options.resourceType == "credit" ? "selected" : "" %>>元宝</option>
                </select>
            </div>
            <div class="col-md-1">
                <input type="button" id="search" class="btn btn-primary btn-block form-control" value="提交">
            </div>
        </div>
    </form>
</div>

<div class="panel">
    <div class="panel-heading">
        <div class="panel-title hidden-xs">
            <span class="glyphicon glyphicon-tasks"></span>走势曲线</div>
        <ul class="nav panel-tabs"">
            <li class="active">
                <a href="#create_cost" class="chart-tab" data-toggle="tab">产生与消耗</a>
            </li>
            <li>
                <a href="#balance" class="chart-tab" data-toggle="tab">留存</a>
            </li>
            <li>
                <a href="#cost_user" class="chart-tab" data-toggle="tab">消费用户</a>
            </li>
        </ul>
    </div>
    <div class="panel-body">
        <div class="tab-content">
            <div id="create_cost" class="tab-pane active">
            </div>
            <div id="balance" class="tab-pane">
            </div>
            <div id="cost_user" class="tab-pane">
            </div>
        </div>
        <div>
            <table class="table">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>产生</th>
                        <th>消耗</th>
                        <th>留存</th>
                        <th>消费用户</th>
                    </tr>
                </thead>
                <tbody>
                    <% _.each(items, function(item){ %>
                        <td><%= item._id %></td>
                        <td><%= item.gen_amount %></td>
                        <td><%= item.cost_amount %></td>
                        <td><%= item.balance %></td>
                        <td><%= item.cost_user %></td>
                    <% }) %>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="panel">
    <div class="panel-heading">
        <div class="panel-title hidden-xs">
            <span class="glyphicon glyphicon-tasks"></span>渠道占比</div>
        <ul class="nav panel-tabs"">
            <li class="active">
                <a href="#gen_panel" data-chart="#create_channel"class="chart-tab" data-toggle="tab">产生渠道</a>
            </li>
            <li class="">
                <a href="#cost_panel" data-chart="#cost_channel" class="chart-tab" data-toggle="tab">消耗渠道</a>
            </li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="dist-chart" class="tab-content">
            <div id="gen_panel" class="tab-pane active">
                <div id="create_channel"></div>
                <div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>渠道</th>
                                <th>数量</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% _.each(gen_dist, function(item){ %>
                            <tr>
                                <td><%= item.type %></td>
                                <td><%= item.amount %></td>
                            </tr>
                            <% }) %>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="cost_panel" class="tab-pane">
                <div id="cost_channel"></div>
                <div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>渠道</th>
                                <th>数量</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% _.each(cost_dist, function(item){ %>
                            <tr>
                                <td><%= item.type %></td>
                                <td><%= item.amount %></td>
                            </tr>
                            <% }) %>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</section>